<template>
  <div class="taskdetail">
    <div v-if="this.taskStatus == 4" style="margin-bottom:13%;">
      <div v-if="taskdata.task_coupons == 1" style="position:sticky;top:0;width:100%;z-index:999;">
        <van-notice-bar text="注意：当前活动佣金不是立返，需后台24小时内审核之后才能提现！！！" left-icon="volume-o"/>
      </div>
      <div class="countbox">
        <span style="margin-left:6px">剩余时间：{{hour}}:{{min}}:{{second}}</span>
      </div>
      <div class="goods">
        <div class="goodsbox">
          <span class="typestyle"
                :class="{'red':taskdata.task_class == 'dy'}">抖音单</span>
          <div style="text-align:center" class="mosaic">
            <viewer>
              <img :src="taskdata.picture_address" alt="" style="width:110px;height:110px;margin:0;">
            </viewer>
<!--            <img src="../assets/_S_R_9_7TFA9KC5G_RLJD_A-removebg-preview.png" alt=""-->
<!--                 style="width:110px;height:110px;position: absolute;top:13%;left:34%;">-->
          </div>
          <p class="second">
            <span class="first">请在<span
              style="color:#ec0c36;"> {{this.taskdata.create_time}} </span>前完成以下操作，否则将自动作废噢哦</span>
            <span class="first">本次活动抖音号：<span style="color:#1005a1;"> {{this.taskdata.brushhands_tbname}} </span></span>
            <span style="color:red;font-weight:600;">本此活动佣金：{{taskdata.task_yjmoney}}元</span>
          </p>
        </div>
      </div>
      <div class="step">
        <van-divider dashed>活动流程</van-divider>
        <div class="first">
          <p class="title" style="margin-bottom:10px;">注意事项：</p>
          <p class="sorting">商家提示：<span style="color:#ec0c36;">{{taskdata.tipsninfo}}</span></p>
        </div>
        <div class="first">
        </div>
        <div class="first">
          <p class="title" style="margin-bottom:10px;">店铺名称：</p>
          <p class="sorting"><span style="color:#ec0c36;">{{shopname}}</span></p>
        </div>
        <div class="first">
          <p class="title" style="margin-bottom:10px;">商品金额：</p>
          <p class="sorting"><span style="color:#ec0c36;">{{taskdata.task_bjmoney}}</span></p>
        </div>
        <div class="first">
          <p class="title" style="margin-bottom:10px;">下单方式：</p>
          <p class="sorting"><span style="color:#ec0c36;">{{['','视频小黄车','直播','扫码（商品二维码 ， 视频二维码）','抖音号'][whereing.orderway]}}</span></p>
        </div>
        <div class="first" v-show="whereing.orderway == 1" >
          <p class="title" style="margin-bottom:10px;">搜索关键词：(点击文字复制)</p>
          <p class="sorting" v-copy="taskdata.key_word"><span style="color:#ec0c36;">{{taskdata.key_word}}</span></p>
        </div>
        <div class="first" v-show="whereing.orderway == 2" >
          <p class="title" style="margin-bottom:10px;">直播帐号：(点击文字复制)</p>
          <p class="sorting" v-copy="taskdata.sort_order"><span style="color:#ec0c36;">{{taskdata.sort_order}}</span></p>
        </div>
        <div class="first" v-show="whereing.orderway == 3" >
          <p class="title" style="margin-bottom:10px;">下单二维码：</p>
          <p style="color:red;font-weight:600;font-size:16px">如果是下单二维码则抖音扫码复制链接验证</p>
          <viewer>
            <img :src="whereing.qrcode" style="width:100px;height:100px;" alt="">
          </viewer>
        </div>
        <div class="first" v-show="whereing.orderway == 4" >
          <p class="title" style="margin-bottom:10px;">抖音帐号：(点击文字复制)</p>
          <p class="sorting" v-copy="taskdata.task_goodsname"><span style="color:#ec0c36;">{{taskdata.task_goodsname}}</span></p>
        </div>
        <div class="first" v-show="whereing.orderway == 5">
          <p class="title" style="margin-bottom:10px;">鲁班货到付款：(点击文字复制)</p>
          <p class="sorting" v-copy="taskdata.luban_Arrival"><span style="color:#ec0c36;">{{taskdata.luban_Arrival}}</span></p>
        </div>
        <div class="first" v-show="whereing.orderway == 6">
          <p class="title" style="margin-bottom:10px;">抖音小店货到付款：(点击文字复制)</p>
          <p class="sorting" v-copy="taskdata.douyin_Arrival"><span style="color:#ec0c36;">{{taskdata.douyin_Arrival}}</span></p>
        </div>
        <p class="tips" v-if="llsuccess"> 验证成功，您可以点击下方 我已浏览 按钮提交活动！</p>
        <div class="btnlist">
          <div class="btn one" @click="onready" v-if="taskdata.task_class == 'pt'">我已付款</div>
          <div class="btn one" @click="onready" v-if="taskdata.task_class == 'dy'">我已付款</div>
          <div class="btn one" @click="onbrowse" v-if="taskdata.task_class == 'll'">我已浏览</div>
          <div class="btn one" @click="onready" v-if="taskdata.task_class == 'gy' && whereing.tkl_status == 1">我已付款
          </div>
          <div class="btn two" @click="cancelDialog = true">取消活动</div>
        </div>
        <van-dialog v-model="cancelDialog" title="活动编号" show-cancel-button @confirm="canTask"
                    @cancel="cancelDialog = false">
          <span class="istrue">确认取消当前活动吗？</span>
        </van-dialog>
        <!--商家提示弹框-->
        <van-dialog v-model="Dialogs" :showConfirmButton="false" @cancel="Dialogs = false" class="bussness">
          <div style="display:flex;flex-direction: column;justify-content:space-around;align-items: center;">
            <span class="title" style="border-left:3px solid white;text-align: left;margin-top:10%">请认真阅读下面内容，不遵守冻结账户
            </span>
            <span style="color:#ec0c36;margin-top:5%;flex-wrap:nowrap;width:80%;">{{taskdata.tipsninfo.split('+++***')[0]}}</span>
            <div class="yuedu" @click="finishs()">我已阅读</div>
          </div>
        </van-dialog>
      </div>
      <van-dialog v-model="numDialog" title="活动编号" show-cancel-button @confirm="onConfirm" @cancel="onCancel">
        <van-field v-model="numval" clearable label="活动编号" left-icon="shopping-cart" placeholder="请输入订单编号"/>
      </van-dialog>
      <van-dialog style="padding: 20px" v-model="payment" :show-cancel-button="false" :showConfirmButton="false"
                  class="yanzheng">
        <div style="margin-top:60%;text-align: center;">
          <h3 style="color:white;">应付实际金额为{{taskdata.task_class == 'll' ? taskdata.task_coupons:
            taskdata.task_bjmoney}}元</h3>
          <p style="color:white;">验证淘口令通过</p>
          <img src="../assets/funs.png" style="width:150px;margin-top:10%" alt="">
          <div class="yuedu_" @click="tiaozhuan()">
            确认验证
          </div>
        </div>
      </van-dialog>
      <van-dialog v-model="Dialog_" :show-cancel-button="false" :show-confirm-button="false" class="yanzheng">
        <div style="margin-top:45%;text-align: center;">
          <h3 style="color:white;font-size:20px;">如若还未找到商品，则取消活动</h3>
          <p style="color:white;">活动还剩10分钟</p>
          <img src="../assets/funs.png" style="width:150px;margin-top:10%" alt="">
          <div class="confirms" @click="Dialog_ = false">
            确认
          </div>
          <div class="cancels" @click="cancelDialog = true">
            取消活动
          </div>
        </div>
      </van-dialog>
      <van-dialog v-model="Dialog_zero" :show-cancel-button="false" :show-confirm-button="false" class="yanzheng">
        <div style="margin-top:50%;text-align: center;">
          <h3 style="color:white;font-size:20px;">活动时间已到,如已付款联系客服</h3>
          <img src="../assets/funs.png" style="width:150px;margin-top:10%;margin-left:0" alt="">
        </div>
        <div class="confirms" @click="contents()">
          联系客服
        </div>
        <div class="cancels" @click="cancelDialog = true">
          取消活动
        </div>
      </van-dialog>
    </div>

    <div class="nodata" v-else>
      <img src="../assets/img/nodata.png" alt="">
      <span class="textcontent">没有正在执行的活动哦，马上去申请</span>
      <span class="taskbtn" @click="$router.push('/home')">申请活动</span>
    </div>
    <return></return>
    <Footer permsg='2'>
    </Footer>
  </div>
</template>

<script>
  import {
    taskprogress,
    syncorder,
    cancelTask,
    verificationdy,
    getuserstatus,
    verification_problem,
    audit_task
  } from '../api/api';
  import Footer from '../components/footer.vue'
  import aestool from '@/utils/aestool.js';
  import moment from 'moment'
  import Return from "./returnone";
  import AgainReturn from "./AgainReturn";
  export default {
    components: {AgainReturn, Return, Footer},
    data() {
      return {
        sstext: '',
        sstext_FU: [],
        numDialog: false,
        socre: 5,
        Dialog_: false,
        Dialog: false,
        Dialog_zero: false,
        Dialogs: false,
        Dialoging: false,
        numval: '',
        active: "",
        shifu: false,
        taskdata: {},
        hour: '',
        logs: true,
        min: '',
        second: '',
        tipsninfo_ID: "",
        payment: false,
        taskStatus: '',
        shopname: '',
        cancelDialog: false,
        questionDialog: false,
        questionvalone: '',
        tipsninfo: [],
        tipsninfo_IMG: [],
        answervalone: '',
        questionvaltwo: '该商品的店铺全称是什么？',
        answervaltwo: '',
        llsuccess: false,
        showFlag: false,
        show: true,
        whereing: {},
        hourGY: "",
        minGY: "",
        secondGY: "",
        tip_all: []
      }
    },
    mounted() {
      this.getStatus()
      this.countDown()
    },
    methods: {
      contents() {
        window.location.href = 'http://wpa.qq.com/msgrd?v=3&uin=814322587'
      },
      tiaozhuan() {
        this.payment = false
        // this.getTaskData()
      },
      finishs() {
        // if (this.socre == 0) {
          this.Dialogs = false
          this.Dialoging = false
        // } else {
        //   this.$toast('请先阅读完商家提示')
        // }
      },
      countDown() {
        let clock = window.setInterval(() => {
          this.socre--
          if (this.socre <= 0) {
            window.clearInterval(clock)
          }
        }, 1000)
      },
      //放大图片
      img_change() {
        this.showFlag = true;
      },
      onKeyCopy(e) {
        this.$toast('复制成功！')
      },
      onKeyError(e) {
        this.$toast('复制失败！')
      },
      onCopy(e) {
        this.$toast('复制成功！')
      },
      onError(e) {
        this.$toast('复制失败！')
      },
      //获取活动状态
      getStatus() {
        getuserstatus().then(res => {
          if (res.data.Status == 200) {
            // console.log(aestool.decrypt(res.data.Data, '123456asdzxcqwe0'));
            let tempdata = JSON.parse(aestool.decrypt(res.data.Data, '123456asdzxcqwe0'))
            console.log(tempdata);
            this.taskStatus = tempdata.task_status
            if (tempdata.task_status == 4) {
              this.getTaskData()
            }
          }
        })
      },
      //副淘口令
      checktkl_FU(i, index) {
        console.log(i.babyID);
        let toastload = this.$toast.loading({
          message: '加载中...',
          forbidClick: true
        });
        let params = {
          baby_id: aestool.encrypt(i.babyID, 'cpf814322587qwer'),
          tkl: this.sstext_FU[index],
          task_id: aestool.encrypt(this.taskdata.id, 'cpf814322587qwer'),
        }
        verificationtkl(params).then(res => {
          toastload.clear()
          if (res.Status == 200) {
            this.$toast({
              duration: 5000,
              message: res.Message
            })
            sessionStorage.setItem('tkl', this.sstext_FU[index])
            if (this.taskdata.task_class == 'll') {
              this.payment = false
              this.llsuccess = true
            } else {
              this.payment = true
              this.shifu = true
              this.Dialog = true
              this.llsuccess = false
            }
          } else {
            this.payment = false
            this.$toast(res.Message)
          }
        })
      },
      //主验证淘口令
      checktkl() {
        console.log(this.taskdata.baby_id);
        let toastload = this.$toast.loading({
          message: '加载中...',
          forbidClick: true
        });
        let params = {
          baby_id: aestool.encrypt(this.taskdata.baby_id, 'cpf814322587qwer'),
          tkl: this.sstext,
          task_id: aestool.encrypt(this.taskdata.id, 'cpf814322587qwer'),
        }
        verificationdy(params).then(res => {
          toastload.clear()
          if (res.Status == 200) {
            this.$toast({
              duration: 5000,
              message: res.Message
            })
            this.getTaskData()
            sessionStorage.setItem('tkl', this.sstext)
            if (this.taskdata.task_class == 'll') {
              this.payment = false
              this.llsuccess = true
            } else {
              this.payment = true
              this.shifu = true
              this.Dialog = true
              this.llsuccess = false
            }
          } else {
            this.payment = false
            this.$toast(res.Message)
          }
        })
      },
      //倒计时
      countTimeGY() {
        const moment = require('moment')
        var date = new Date();
        var now = date.getTime();
        //设置截止时间
        // let time = moment().format('YYYY/MM/DD HH:mm:ss');
        // var endDate = new Date(time); .getTime();
        var end = this.whereing.pay_time * 1000
        //时间差
        var leftTime = end - now;
        if (leftTime >= 0) {
          // 时
          let h = Math.floor(leftTime / 1000 / 60 / 60 % 24)
          this.hourGY = h < 10 ? '0' + h : h
          // 分
          let m = Math.floor(leftTime / 1000 / 60 % 60)
          this.minGY = m < 10 ? '0' + m : m
          // 秒
          let s = Math.floor(leftTime / 1000 % 60)
          this.secondGY = s < 10 ? '0' + s : s
        } else {
          this.hourGY = '00'
          this.minGY = '00'
          this.secondGY = '00'
        }
        // 等于0的时候不调用
        if (Number(this.hourGY) === 0 && Number(this.minGY) === 0 && Number(this.secondGY) === 0) {
          return
        } else {
          setTimeout(this.countTimeGY, 1000)
        }
      },
      //倒计时
      countTime() {
        var date = new Date();
        var now = date.getTime();
        //设置截止时间
        let time = moment(this.taskdata.create_time).format('YYYY/MM/DD HH:mm:ss');
        var endDate = new Date(time);
        var end = endDate.getTime();
        //时间差
        var leftTime = end - now;
        if (leftTime >= 0) {
          // 时
          let h = Math.floor(leftTime / 1000 / 60 / 60 % 24)
          this.hour = h < 10 ? '0' + h : h
          // 分
          let m = Math.floor(leftTime / 1000 / 60 % 60)
          this.min = m < 10 ? '0' + m : m
          // 秒
          let s = Math.floor(leftTime / 1000 % 60)
          this.second = s < 10 ? '0' + s : s
        } else {
          this.hour = '00'
          this.min = '00'
          this.second = '00'
        }
        if (Number(this.min) == 10 && Number(this.second) == 0 && this.taskdata.task_class != 'gy') {
          this.Dialog_ = true
        }
        if (this.min == '00' && this.second == '00' && this.taskdata.task_class != 'gy') {
          this.Dialog_zero = true
        }
        // 等于0的时候不调用
        if (Number(this.hour) === 0 && Number(this.min) === 0 && Number(this.second) === 0) {
          return
        } else {
          setTimeout(this.countTime, 1000)
        }
      },
      //获取活动详情
      getTaskData() {
        let toastload = this.$toast.loading({
          message: '加载中...',
          forbidClick: true
        });
        taskprogress().then(res => {
          toastload.clear()
          if (res.Status == 200) {
            // console.log(aestool.decrypt(res.Data, 'cpf123456tasklis'));
            this.taskdata = JSON.parse(aestool.decrypt(res.Data, 'cpf123456tasklis'))
            console.log(this.taskdata,'taskdata');
            var date = new Date(this.taskdata.create_time)
            var time = (date.getTime()) / 1000
            let timer = time + 3600
            this.taskdata.create_time = this.timestampToTime(timer)
            this.shopname = this.taskdata.task_shopname
            this.countTime()
            this.whereing = this.taskdata.where
            console.log(this.whereing.qrcode);
            if (this.whereing.tkl_status == 1) {
              console.log(this.whereing.tkl_status);
              this.countTimeGY()
            }
            if (this.taskdata.task_class != 'll') {
              this.Dialogs = true
            } else if (this.taskdata.task_class == 'll') {
              this.Dialoging = true
            }
            this.tipsninfo = this.taskdata.tipsninfo.split('+++***')[1].split(',')
            this.tipsninfo_ID = this.taskdata.tipsninfo.split('+++***')[2].split(',')
            this.tipsninfo_IMG = this.taskdata.tipsninfo.split('+++***')[3].split(',')
            if(this.tip_all.length==0){
              if (this.tipsninfo[0] != '' && this.tipsninfo_ID[0] != '' && this.tipsninfo_IMG[0] != '') {
                this.tipsninfo.forEach((item, index) => {
                  this.tip_all.push({name: item, babyID: this.tipsninfo_ID[index], IMG: this.tipsninfo_IMG[index]})
                })
              }
            }
            let tkltext = sessionStorage.getItem('tkl')
            if (tkltext) {
              this.sstext = tkltext
              if (this.taskdata.task_class == 'll') {
                this.payment = false
                this.llsuccess = true
              } else {
                this.payment = true
                this.llsuccess = false
              }
            }
          } else {
            this.taskStatus = 1
            this.$toast(res.Message)
          }
        })
      },
      //时间戳转日期
      timestampToTime(timestamp) {
        var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
        var h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
        var m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
        var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
        return Y + M + D + h + m + s;
      },
      //已付款
      onready() {
        // if (this.whereing.tkl_status == 0) {
        //   this.$toast('请先验证抖口令！')
        // } else {
        //
        // }
        this.numDialog = true
        this.numval = ''
      },
      //已浏览
      onbrowse() {
        // if (this.whereing.tkl_status == 0) {
        //   this.$toast('请先验证淘口令！')
        // } else {
          this.questionvalone = this.taskdata.timetask
          this.answervalone = ''
          this.answervaltwo = ''
          this.questionDialog = true
        // }
      },
      //取消活动
      canTask() {
        let params = {
          cancel_task: aestool.encrypt(this.taskdata.id, 'CancelTaskxcqwe0'),
        }
        cancelTask(params).then(res => {
          if (res.Status == 200) {
            this.$toast(res.Message)
            sessionStorage.removeItem('tkl')
            setTimeout(() => {
              this.getStatus()
            }, 1500);
          } else {
            this.$toast(res.Message)
          }
        })
      },
      //确认活动
      onConfirm() {
        if (this.numval == '' && this.numval.length>=19) {
          this.$toast('活动编号不可以为空或号码不可少于19位！')
        } else {
          let toastload = this.$toast.loading({
            message: '加载中...',
            forbidClick: true
          });
          let params = {
            task_id: aestool.encrypt(this.taskdata.id, 'Syncorderzxcqwe0'),
            order: aestool.encrypt(this.numval, 'Syncorderzxcqwe0'),
            shop_name: aestool.encrypt(this.taskdata.task_shopname, 'Syncorderzxcqwe0')
          }
          if (this.taskdata.task_coupons == 1) {
            audit_task(params).then(res => {
              console.log('审核单', res)
              toastload.clear()
              if (res.Status == 200) {
                this.$toast(res.Message)
                setTimeout(() => {
                  this.$router.push('/home')
                }, 1500);
              } else {
                this.$toast(res.Message)
              }
            })
          } else {
            syncorder(params).then(res => {
              toastload.clear()
              if (res.Status == 200) {
                this.$toast(res.Message)
                setTimeout(() => {
                  this.$router.push('/home')
                }, 1500);
              } else {
                this.$toast(res.Message)
              }
            })
          }
        }
      },
      onCancel() {
        this.numDialog = false
      },
      //确认浏览
      handleConfirm() {
        if (this.answervalone == '' || this.answervaltwo == '') {
          this.$toast('答案不可以为空！')
        } else {
          let params = {
            task_id: aestool.encrypt(this.taskdata.id, 'Verificationprob'),
            answer: aestool.encrypt(this.answervalone, 'Verificationprob'),
            shopanme: aestool.encrypt(this.answervaltwo, 'Verificationprob'),
          }
          verification_problem(params).then(res => {
            this.$toast(res.Message)
            if (res.Status == 200) {
              setTimeout(() => {
                this.$router.push('/taskmanage')
              }, 1500);
            }
          })
        }
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .taskdetail {
    padding-bottom 56px
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    .IMGAGE {
      width: 110px;
      height: 110px;
      position: relative;
    }

    .istrue {
      display block
      padding 10px 16px
    }

    .field {
      padding-bottom 0
    }

    .fieid {
      border 1px solid #f1f1f1
      margin 10px
    }

    .nodata {
      padding-top: 80px
      display flex
      flex-direction column
      justify-content center
      align-items center

      img {
        width 70%
      }

      .textcontent {
        font-size 14px
        color #a79478
      }

      .taskbtn {
        width 200px
        color #ffffff
        font-size 14px
        background #64c5ff
        text-align center
        line-height 36px
        margin-top 20px
      }
    }

    .countbox {
      position sticky
      top 0
      z-index 999
      width 100%
      color rgb(25, 137, 250)
      background rgb(236, 249, 255)
      text-align center
      display flex
      align-items center
      height 40px
      justify-content center
      font-size 14px

      .van-count-down, .van-divider {
        color rgb(25, 137, 250)
      }
    }

    .green {
      background #00d5c3
    }

    .red {
      background #f54d21
    }

    .blue {
      background #04a7f5
    }

    .darkgreen {
      background darkgreen
    }

    .goods {
      background url(../assets/img/task.jpg) no-repeat top center
      background-size cover
      height 142px
      position relative

      .goodsbox {
        position absolute
        padding 30px 10px
        background #fff
        margin 56px 30px 20px
        font-size 14px
        border-radius 6px
        box-shadow 0px 1px 8px 0px #eaeaea

        .typestyle {
          position: absolute;
          display inline-block
          line-height 24px
          color white
          padding 0 10px
          border-top-right-radius 12px
          border-bottom-right-radius 12px
        }

        .first {
          display block
          line-height 20px
        }

        img {
          width 80px
          height 80px
          margin-bottom 10px
        }
      }
    }

    .step {
      margin-top 160px

      .keyword {
        padding 10px 16px
        font-size 14px
      }

      .first {
        padding 0 16px

        .btntwo {
          display flex
          justify-content space-between
          align-items center
          margin 0 15px 10px 10px

          span {
            display block
            text-align center
            border-radius 20px
            font-size 14px
            width 49%
            line-height 35px
            color #fff
          }

          .check {
            background #ff976a
          }

          .clear {
            background #1989fa
          }
        }

        .title {
          border-left 3px solid #5463f0
          padding-left 10px
          font-size 14px

          .copy {
            color #02acfa
            text-decoration underline
          }
        }

        .sorting {
          padding 0 16px 10px
          font-size 14px
        }

        .iptstyle {
          border 0
          background #f1f1f1
          border-radius 6px
          padding 10px
          font-size 14px
          width 87%
          margin 10px 10px 0 10px
        }
        textarea:

        :-webkit-input-placeholder {
          color #929292
          font-size 14px
        }
      }

      .tips {
        background #fccbcb
        color #e9010e
        padding 5px 16px
        font-size 14px
      }

      .btnlist {
        display flex
        justify-content space-around
        align-items center
        font-size 14px
        margin 10px 0

        .btn {
          width 30%
          line-height 40px
          text-align center
          border-radius 20px
        }

        .one {
          color #5463f0
          background #f2f2f2
        }

        .two {
          color #ffffff
          background #5463f0
        }
      }
    }
  }
</style>

<style>
  .first .van-cell:not(:last-child)::after {
    border-bottom: 0;
  }

  .bussness {
    width: 90%;
    display: flex;
    background: url("../assets/bluebk.png");
    background-size: 100% 100%;
    justify-content: center;
    align-items: center;
    margin: 10px auto;
    height: 450px;
    flex-direction: column;
    overflow-y: scroll;
  }

  .yuedu {
    width: 80%;
    font-size: 18px;
    border-radius: 10px;
    height: 50px;
    position: absolute;
    bottom: 10%;
    left: auto;
    display: flex;
    color: white;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(left, rgb(62, 128, 255), rgb(77, 173, 255));
  }

  .confirms {
    width: 30%;
    font-size: 16px;
    border-radius: 10px;
    height: 40px;
    position: absolute;
    bottom: 5%;
    left: 10%;
    display: flex;
    color: white;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(left, rgb(62, 128, 255), rgb(77, 173, 255));
  }

  .cancels {
    width: 30%;
    font-size: 16px;
    border-radius: 10px;
    height: 40px;
    position: absolute;
    bottom: 5%;
    left: 60%;
    display: flex;
    color: white;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(left, rgb(62, 128, 255), rgb(77, 173, 255));
  }

  .yanzheng {
    background: url("../assets/stars.png");
    background-size: 100% 100%;
    height: 400px;
    width: 80%;
    font-size: 18px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .yanzheng_ {
    /*background: url("../assets/stars.png");*/
    /*background-size: 100% 100%;*/
    overflow-y: scroll;
    height:600px;
    width: 80%;
    font-size: 18px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .yuedu_ {
    width: 80%;
    font-size: 18px;
    border-radius: 10px;
    height: 50px;
    position: absolute;
    bottom: 10%;
    left: 10%;
    display: flex;
    color: white;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(left, rgb(62, 128, 255), rgb(77, 173, 255));
  }
</style>


